<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-button class="submission priamry_border" style="display: flex;float: right" @click="back()">返回</el-button>
      <el-form class="formValidate mt20" label-width="120px" @submit.native.prevent>
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单号：">
              <span v-html="orderDatalist.orderNo || '无'"></span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态：">
              <span>已取消</span>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="padding: 0px 20px;border-bottom: 1px solid #e6ebf5;"></div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="酒店名称：">
              <span v-html="orderDatalist.jdName || '无'"></span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房间名称：">
              <span v-html="orderDatalist.jdfxName || '无'"></span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入离时间：">
              <span v-html="orderDatalist.rlTime || '无'"></span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="间数：">
              <span v-html="orderDatalist.jianshu || '无'"></span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="购买时间：">
              <span v-html="orderDatalist.gmTime || '无'"></span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="低价总额：">
              <span v-html="orderDatalist.djzePrice || '无'"></span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="低价构成：">
              <span v-html="orderDatalist.djgc || '无'"></span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="促销费用：">
              <span v-html="orderDatalist.cxfy || '无'"></span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="原始金额：">
              <span v-html="orderDatalist.ysjePrice || '无'"></span>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="padding: 0px 20px;border-bottom: 1px solid #e6ebf5;"></div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="入住人：">
              <span v-html="orderDatalist.ruzhuren || '无'"></span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户电话号码：">
              <span v-html="orderDatalist.userPhone || '无'"></span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人：">
              <span v-html="orderDatalist.lianxiren || '无'"></span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计到店：">
              <span v-html="orderDatalist.yujidaodian || '无'"></span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="取消规则：">
              <span v-html="orderDatalist.closeGuizhe || '无'"></span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { orderDetailApi } from '@/api/msOrder'
export default {
  name: 'OrderDetail',
  data() {
    return {
      orderDatalist: null,
    }
  },
  mounted() {
    this.getDetail(this.$route.params.id)
  },
  methods: {
    // 获取订单详情
    getDetail(orderId) {
      this.loading = true
      orderDetailApi({ id: orderId }).then(res => {
        this.orderDatalist = res
        console.log("订单详情：", this.orderDatalist)
        this.loading = false
      }).catch(() => {
        this.orderDatalist = null
        this.loading = false
      })
    },
    // 返回
    back(){
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.logistics {
  align-items: center;
  padding: 10px 0px;

  .logistics_img {
    width: 45px;
    height: 45px;
    margin-right: 12px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .logistics_cent {
    span {
      display: block;
      font-size: 12px;
    }
  }
}

.trees-coadd {
  width: 100%;
  height: 400px;
  border-radius: 4px;
  overflow: hidden;

  .scollhide {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-left: 18px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;

    .content {
      font-size: 12px;
    }

    .time {
      font-size: 12px;
      color: #2d8cf0;
    }

  }
}

.title {
  margin-bottom: 14px;
  color: #303133;
  font-weight: 500;
  font-size: 14px;
}

.description {
  &-term {
    display: table-cell;
    padding-bottom: 5px;
    line-height: 20px;
    width: 50%;
    font-size: 12px;
    color: #606266;
  }

  ::v-deep .el-divider--horizontal {
    margin: 12px 0 !important;
  }
}</style>
